<template>
  <div class="h-full">
    <SearchContainer @search="getTable" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" layout="inline" :model="formState">
        <a-form-item label="表CODE" name="id">
          <a-input v-model:value="formState.id" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="表名" name="tableName">
          <a-input v-model:value="formState.tableName" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card :bordered="false" class="mt-2" size="small">
      <template #title>
        <div class="p-2 flex justify-between items-center">
          <div>表信息</div>
          <div>
            <BaseImport url="/common/tableMapping/upload" accept=".json" multiple @success="getTable" />
          </div>
        </div>
      </template>
      <BaseTable
        :height="280"
        :columns="mainColumns"
        :loading="loadingTable"
        :data-source="tableDataSources"
        bordered
        :custom-row="(record) => ({ onClick: () => onSelectRow(record) })"
        :row-class-name="(record) => (record.id === selectTableId ? 'table-selected-row cursor-pointer' : 'cursor-pointer')"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'id'">
            <span class="text-primary ml-4">{{ record.id }}</span>
            <a-button v-copy="record.id" type="link" size="small" class="ml-2">
              <BaseIcon name="BlockOutlined" />
            </a-button>
          </template>
          <!-- <template v-if="column.dataIndex === 'id'">
            <a-button type="link" @click="onSelectRow(record)">{{ record.id || '-' }}</a-button>
          </template> -->
        </template>
      </BaseTable>
    </a-card>
    <a-card :bordered="false" class="mt-2" size="small">
      <template #title>
        <div class="p-2 flex justify-between items-center">
          <div>
            <span v-if="currentTableName" class="text-red-500">【{{ currentTableName }}】</span>列信息
          </div>
        </div>
      </template>

      <BaseTable :columns="detailColumns" fill :data-source="columnDataSources" bordered :pagination="false" :loading="loadingColumns">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'sorter'">
            {{ record.sorter ? '是' : '否' }}
          </template>
          <template v-if="column.dataIndex === 'ellipsis'">
            {{ record.ellipsis ? '是' : '否' }}
          </template>
          <template v-if="column.dataIndex === 'isHide'">
            {{ record.isHide ? '是' : '否' }}
          </template>
          <template v-if="column.dataIndex === 'format'">
            {{ record.format || '-' }}
          </template>
          <template v-if="column.dataIndex === 'fixed'">
            {{ record.fixed || '-' }}
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

import BaseTable from '@/components/BaseTable'
import SearchContainer from '@/components/SearchContainer'

const formRef = ref(null)
const selectTableId = ref()
const currentTableName = ref()
const formState = ref({ id: '', tableName: '', applicationId: '1703963394688258049' })
const mainColumns = [
  { title: '表CODE', dataIndex: 'id' },
  { title: '表名', dataIndex: 'tableName' },
  { title: '备注', dataIndex: 'memo' }
]
const detailColumns = [
  { title: '顺序', width: 100, dataIndex: 'indexNumber' },
  { title: '列名key', dataIndex: 'dataIndex' },
  { title: '列名', width: 200, dataIndex: 'title' },
  { title: '列宽', dataIndex: 'width' },
  { title: '超出隐藏', dataIndex: 'ellipsis' },
  { title: '隐藏列', dataIndex: 'isHide' },
  { title: '排序', dataIndex: 'sorter' },
  { title: '对齐方式', dataIndex: 'align' },
  { title: '格式化', dataIndex: 'format' },
  { title: '固定列', dataIndex: 'fixed' }
]

const onSelectRow = (record) => {
  currentTableName.value = record.tableName
  selectTableId.value = record.id
  getColumns()
}

// 获取表
const {
  loading: loadingTable,
  tableData: tableDataSources,
  getData: getTable
} = useTable({
  url: '/common/tableMapping/getTableMappingList',
  pagination: false,
  params: formState.value,
  onSuccess: (res) => {
    onSelectRow(res[0])
    columnDataSources.value = []
  }
})
// 获取列
const {
  loading: loadingColumns,
  tableData: columnDataSources,
  getData: getColumns
} = useTable({
  url: '/common/tableMapping/getTableMappingCloumnList',
  formatParams: () => ({ id: selectTableId.value }),
  pagination: false,
  formatResult: (res) => {
    return res.map((item) => ({ ...item, width: item.width || 'auto' })).reverse()
  }
})
onMounted(() => {
  getTable()
})
</script>
<style lang="less" scoped>
:deep(.table-selected-row) {
  background-color: #eaefff !important;
  .ant-table-cell-fix-right {
    background-color: #eaefff !important;
  }
}
</style>
